<template>
  <div>
    <el-input placeholder="请输入内容" v-model="stext" @keyup.enter.native="search()" class="input-with-select"
              style="width:40%">
      <el-select v-model="cname" slot="prepend" placeholder="请选择" @change="getKey">
        <el-option label="姓名" value="name"></el-option>
        <el-option label="健康状况" value="health"></el-option>
        <el-option label="打卡时间" value="createTime"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
    </el-input>

    <el-table
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="编号"
          sortable
          width="120">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          width="50">
      </el-table-column>
      <el-table-column
          prop="phonenum"
          label="手机号码"
          width="120">
      </el-table-column>
      <el-table-column
          label="体温"
          prop="temp"
          width="80"
          sortable>
        <template slot-scope="scope">
          <div slot="reference">
            <p size="medium" :class="scope.row.temp>36 && scope.row.temp<37.2 ? '' : 'red'">
              {{ scope.row.temp + "°C" }}</p>
          </div>
        </template>
      </el-table-column>

      <el-table-column
          prop="risk"
          label="是否到达过高风险地区"
          width="120">
      </el-table-column>
      <el-table-column
          prop="health"
          label="健康状况"
          width="170">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="打卡时间"
          width="170"
          sortable>
      </el-table-column>
      <el-table-column
          prop="depart"
          label="现居地址"
          width="120">
      </el-table-column>
      <el-table-column
          prop="content"
          label="备注"
          width="120">
      </el-table-column>
      <el-table-column width="120" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="dialogFormVisible = true,edit(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="deleteRecord(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :page-size="6"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>

      <el-dialog title="修改打卡记录" :visible.sync="dialogFormVisible" slot>
        <el-form :model="Emp" ref="Emp" :rules="rules">
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="Emp.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
            <el-radio v-model="Emp.sex" label="男">男</el-radio>
            <el-radio v-model="Emp.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phonenum">
            <el-input v-model="Emp.phonenum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="体温" :label-width="formLabelWidth" prop="temp">
            <el-input v-model="Emp.temp" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否曾到达高风险地区" :label-width="formLabelWidth" prop="risk">
            <el-input v-model="Emp.risk" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="健康状况" :label-width="formLabelWidth" prop="health">
            <el-select v-model="Emp.health"  placeholder="请选择">
              <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="打卡时间" :label-width="formLabelWidth" prop="createTime">
            <el-date-picker
                v-model="Emp.createTime"
                align="right"
                type="date"
                placeholder="选择日期时间"
                :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="现居地址" :label-width="formLabelWidth" prop="depart">
            <el-input v-model="Emp.depart"> </el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="Emp.content" autocomplete="off"></el-input>
          </el-form-item>
          </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="update('Emp')">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>

</template>

<script>
export default {
  methods: {
    search() {
      if (!this.stext) {

        axios.get('/emp/findAll/1/6').then((resp) => {
          console.log(resp)
          this.tableData = resp.data.records
          this.total = resp.data.total
          this.cname = ""
          this.searchKey = null
        })
      } else {
        if (this.searchKey == null) {
          this.$message.warning("请选择搜索条件，搜索条件不可为空！")
        } else {
          this.loading = true
          axios.get('/emp/search/' + this.searchKey + "/" + this.stext).then((resp) => {
            this.tableData = resp.data
            this.total = resp.data.total
            this.loading = false
          })
        }
      }
    },
    getKey(e) {
      this.searchKey = e
    },

    deleteRecord(row) {
      this.$confirm('是否确定要删除' + row.name + '的打卡记录?', '删除数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('/emp/deleteById/' + row.id).then((resp) => {
          this.$alert(row.name + '的打卡记录删除成功！', "消息", {
            type: 'success',
            confirmButtonText: "确定",
            callback: action => {
              window.location.reload()
            }
          })
        }).catch(err => {
          this.$message.error("删除失败~")
        })
      })
    },

    update(formName) {
      this.$refs[formName].validate((valid)=>{
        if (valid){
          axios.put('/emp/update', this.Emp).then((resp) => {
            console.log(resp)
            if (resp.data == 'success') {
              this.$alert(this.Emp.name + '的打卡记录修改成功！', "消息", {
                confirmButtonText: "确定",
                type: 'success',
                callback: action => {
                  window.location.reload()
                }
              })
              this.dialogFormVisible = false
            }
          }).catch(err => {
            this.$message.error("更新失败~")
          })
        }
      })
    },
    edit(row) {
      axios.get('/emp/findById/' + row.id).then((resp) => {
        this.Emp = resp.data;
      }).catch(err => {
        this.$message.error("查询失败~")
      })
    },
    handleCurrentChange(currentPage) {
      this.loading = true
      axios.get('/emp/findAll/' + currentPage + '/6').then((resp) => {
        this.tableData = resp.data.records
        this.total = resp.data.total
        this.loading = false
      }).catch(err => {
        this.$message.error("查询失败~")
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    }
  },
  created() {
    this.loading = true
    axios.get('/emp/findAll/1/6').then((resp) => {
      console.log(resp)
      this.tableData = resp.data.records
      this.total = resp.data.total
      this.loading = false
    }).catch(err => {
      this.$message.error("查询失败~")
    });
  },

  data() {

    return {
      options3: [
        {
          value: "",
          label: "",
        },
      ],
      options2: [{
        value: '正常',
        label: '无下列情况，身体健康'
      }, {
        value: '咳嗽',
        label: '咳嗽'
      }, {
        value: '乏力',
        label: '乏力'
      }, {
        value: '呼吸困难',
        label: '呼吸困难'
      }, {
        value: '与新冠肺炎有关的其他症状，如流涕，咽痛，肌痛，腹泻等',
        label: '与新冠肺炎有关的其他症状，如流涕，咽痛，肌痛，腹泻等'
      }],
      value: '',
      cname: '',
      stext: '',
      searchKey: "",
      options: [],
      values: [],
      list: [],
      loading: false,
      tableData: null,
      total: null,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      LabelWidth: '180px',
      Emp: {
        id: "",
        name: "",
        sex: "",
        phonenum: "",
        temp: "",
        risk: "",
        health: "",
        createTime: "",
        content: "",
        depart: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min:2, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
        phonenum: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '电话号码格式不对' },
        ],
        temp: [
          { required: true, message: '请输入体温', trigger: 'blur' },
          { pattern: /^(\-|\+)?\d+(\.\d+)?$/, message: '格式错误' }
        ],
        risk: [
          { required: true, message: '请选择是否曾到达高风险地区', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' },
        ],
        createTime:[
          { required: true, message: '请选择打卡时间', trigger: 'blur' },
        ],
        health: [
          { required: true, message: '请输入健康状况', trigger: 'blur' }
        ],
        depart: [
          { required: true, message: '请输入你现在居住的地址', trigger: 'blur' }
        ]

      }
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.red {
  color: red;
}
</style>
